<template>
  <basic-dialog
    :visible="visible"
    :title="'未从推荐供应商订货'"
    :ok-text="'确认'"
    :show-close="false"
    :handle-ok="handleSave"
    :handle-close="onCancel"
    :loadingBtn="submitLoading"
  >
    <div class="form-container">
      <el-form
        ref="supplierForm"
        :model="supplierForm"
        label-width="130px"
      >
        <el-card
          v-for="(item, index) in supplierFormList"
          :key="index"
          class="supplier-info"
          shadow="hover"
        >
          <div slot="header">
            <span class="title">中标供应商: {{item.supplierName}}</span>
          </div>
          <el-form-item label="请填写原因">
            <el-input v-model.trim="item.orderReason" type="textarea" placeholder="请填写原因"></el-input>
          </el-form-item>
        </el-card>
      </el-form>
    </div>
  </basic-dialog>
</template>
<script>
import { mapState } from 'vuex';
import BasicDialog from '@sourcing/components/BasicDialog';

export default {
  name: 'SupplierDialog',
  components: {
    BasicDialog,
  },
  props: {
    dialogVisible: {
      type: Boolean,
    },
    submitLoading: {
      type: Boolean,
    },
  },
  data () {
    return {
      supplierForm: {
        supplierFormList: [],
      },
    };
  },

  computed: {
    ...mapState('sourcing', {
      supplierFormList: (state) => state.purchaseDetail.calibrationSupplierList,
    }),

    visible () {
      return this.dialogVisible;
    },
  },
  methods: {
    onCancel () {
      this.$emit('hide-handler');
    },
    handleSave () {
      let hasEmptyReasonList = this.supplierFormList.filter((item) => !item.orderReason)
      if (hasEmptyReasonList.length !== 0) {
        return this.$message.warning('未从推荐供应商订货原因不能为空')
      }
      this.$emit('confirm-submit', this.supplierFormList)
    }
  },
};
</script>
<style lang="less">
.form-container {
  .supplier-info {
    margin-bottom: 10px;
  }
}
</style>
